﻿
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <title>中保金服-即时通讯</title>
    <script src="~/Content/js/move.js?v=2"></script>
    <link href="~/Content/css/layer.css" rel="stylesheet" />
    <link href="~/Content/css/chat.css?v=123" rel="stylesheet" />
    <script src="~/Scripts/Jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
    <!--会话窗口-->
    <div class="chatWindows" id="chatWindows" style="display:none;">
        <div class="chatTargetList">
            <ul>
                <!--聊天对象列表Start-->
                <!--聊天对象列表End-->
            </ul>
        </div>

        <!--聊天窗口列表-->
        <div class="chatWindowsList">
            <!--顶部可拖动层-->
            <div class="moveLayer" id="moveLayer">
            </div>
            <!--通话区域Start-->
            <!--通话区域End-->
        </div>
    </div>

    <!--当前通话列表-->
    <div class="connListContent" id="connListContent">
        <div class="waitInTitle" id="waitInMove">
            <div class="titleTip">在线客服人数（<font color="red" class="serviceOnlineCount">0</font>人）</div>
            <div class="titleTap">
                <span class="currentTap">待接入（<font color="red">0</font>人）</span>
                <span>历史会话</span>
            </div>
        </div>

        <div class="waitInList">
            <div class="searchContent" style="display:none;">
                <input type="text" placeholder="请输入姓名/昵称" value="" id="searchName" style="width:144px;"/> 
                <input  type="button" value="查询" id="searchBtn" class="btn btn-primary Search-R margin-l-3"/>
            </div>
            <ul class="waitInListUL">
                <!--待接入列表Start-->
                <!--待接入列表End-->
            </ul>
            <ul class="beforeInListUL" style="display:none;">
                <!--历史会话列表Start-->
                <!--历史会话列表End-->
            </ul>
        </div>
    </div>

    <!--弹框__图片发送框-->
    <div class="layui-layer layui-layer-page" id="sendImageDiv" type="page" times="17" showtime="0" contype="string" style="z-index: 19891031; display:none; width: 430px; top: 241px; left: 201px;">
        <div class="layui-layer-title">发送图片</div>
        <div id="" class="layui-layer-content">
            <div class="layim-add-box">
                <div class="layim-add-img" style="text-align:center;">
                    <img class="layui-circle" id="fileImageImg" style="max-height:180px;" src="">
                </div>
            </div>
        </div>
        <span class="layui-layer-setwin">
            <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a>
        </span>
        <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0" id="imgSendBtn">发送</a>
            <a class="layui-layer-btn1" id="imgCancelBtn">取消</a>
        </div>
    </div>
    <input type="hidden" id="CurrentOpenId" value="" />

    <!--弹框__添加备注-->
    <div class="layui-layer layui-layer-page" id="addRemarkDiv" type="page" times="17" showtime="0" contype="string" style="z-index: 19891031;display:none; width: 430px; top: 241px; left: 201px;">
        <div class="layui-layer-title">添加备注</div>
        <div id="" class="layui-layer-content">
            <div class="layim-add-box">

                <div class="layim-add-img">
                    <span class="inputTitle">真实姓名：</span>
                    <span><input type="text" class="input-big" id="realName" /></span>
                </div>
                <div class="layim-add-img">
                    <span class="inputTitle">手机号码：</span>
                    <span><input type="text" class="input-big" id="phone" /></span>
                </div>
                <div class="layim-add-img">
                    <span class="inputTitle">备注信息：</span>
                    <span><input type="text" class="input-big" id="userRemark" /></span>
                </div>
            </div>
        </div>
        <span class="layui-layer-setwin">
            <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a>
        </span>
        <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0" id="addRemarkBtn">确认</a>
            <a class="layui-layer-btn1" id="cancelRemarkBtn">取消</a>
        </div>
    </div>

    <!--弹框__关联工单号-->
    <div class="layui-layer layui-layer-page" id="associatedWarrantyRecordNo" type="page" times="17" showtime="0" contype="string" style="z-index: 19891031;display:none; width: 430px; top: 241px; left: 201px;">
        <div class="layui-layer-title">关联报案单号</div>
        <div id="" class="layui-layer-content">
            <div class="layim-add-box">
                <div class="layim-add-img">
                    <span class="inputTitle">已有报案单号：</span>
                    <span><textarea id="areaHasOrder" readonly="readonly"></textarea></span>
                </div>
                <div class="layim-add-img">
                    <span class="inputTitle">报案单号：</span>
                    <span><input type="text" class="input-big" id="WarrantyRecordNo" /></span>
                </div>
            </div>
        </div>
        <span class="layui-layer-setwin">
            <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a>
        </span>
        <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0" id="addWarrantyRecordNoBtn">确认</a>
            <a class="layui-layer-btn1" id="cancelWarrantyRecordNoBtn">取消</a>
        </div>
    </div>

    <!--图片查看框 onclick="btnRight90(this);"-->
    <div class="imageDetial" style="display:none;">
    </div>
    <div class="imageContent" style="display:none;">
        <img src="/Images/3.jpg" id="ShowBigImg" />
    </div>

    <!--聊天记录-->
    <div class="chatRecord" style="display:none">
        <div class="recordTitle">
            <span style="margin-left:20px;"> 与 <span class="recordTitleName"></span> 的聊天记录</span>
            <span class="opera">+</span>
        </div>
        <div class="recordContent">
            <ul></ul>
        </div>
    </div>

    <input type="file" id="fileImageInput" style="display:none;" onchange="selectImageChange(this)" />
    <script src="~/Content/js/moment.js"></script>
    <script src="~/Content/js/webChat.js?v=2"></script>
    <script type="text/javascript">
        //=====================================webSocket_START==================================
        var ws;
        var socketUrl = "";
        var userId = "@ViewBag.UserId";
        var userName = "@ViewBag.UserName ";
        var errorCount = 100;
        $().ready(function () {
            var _host = window.location.host;
            socketUrl = 'ws://' + _host + '/api/SocketApi/Get?user=' + userId;
            ws = new WebSocket(socketUrl);
            console.log('开始');
            //连接
            ws.onopen = function () {
                console.log('已经连接');
                //heartCheck.start();
            }
            //收到消息
            ws.onmessage = function (evt) {
                var _data = JSON.parse(evt.data);
                //console.log(evt.data);
                //正常消息
                if (_data.MessageType == "100") {
                    var _model = _data.Model;
                    var _target = $("#chatWindows .chatTargetList ul li[openid='" + _model.OpenId + "']");
                    var nickName = _target.find(".realName").html();
                    var logo = _target.find("img").attr("src");
                    var messageCount = parseInt(_target.find(".messageCount").html() || '0') + 1;
                    _target.find(".messageCount").html(messageCount);
                    _target.find(".messageCount").show();
                    var _html = buildCustomerMessage(_model.Message, _model.MessageType, _model.Time, nickName, logo);
                    $("#chatWindows .chatWindowsList .chat[openid='" + _model.OpenId + "'] .chatContent ul").append(_html);
                }
                    //待接入列表移除客户消息
                else if (_data.MessageType == "200") {
                    RemoveCustomerFromWaitList(_data.Model)
                }
                    //待接入列表新增客户消息
                else if (_data.MessageType == "300") {
                    var _html = CreateCustomerWaitList(_data.Model);
                    $(".waitInList .waitInListUL").append(_html);
                    stasticWaitCount();
                }
                    //客服上线
                else if (_data.MessageType == "400") {
                    $(".serviceOnlineCount").html((parseInt($(".serviceOnlineCount").html()) || 0) + 1);
                }
                    //客服下线
                else if (_data.MessageType == "500") {
                    $(".serviceOnlineCount").html((parseInt($(".serviceOnlineCount").html()) || 0) - 1);
                }
                //如果是心跳包数据，则重置计时器
                //if (evt.data == "HeartBeat") {
                //    console.log("收到心跳包");
                //    heartCheck.reset();
                //} else {
                //    console.log(evt.data);
                //}
            }
            //出错
            ws.onerror = function (evt) {
                console.log('出错：' + JSON.stringify(evt));
            }
            //关闭
            ws.onclose = function () {
                console.log('已经关闭');
                if (errorCount < 100) {
                    errorCount++;
                    console.log(errorCount);
                    reconnect(socketUrl);
                } else {
                    alert("连接已被关闭。");
                }
            }

            $('#close').click(function () {
                ws.close();
            });

            $('#send').click(function () {
                if (ws.readyState == WebSocket.OPEN) {
                    //ws.send($('#content').val());
                    ws.send($("#to").val() + "|" + $('#content').val());
                }
                else {
                    console.log('连接已经关闭');
                }
            });
            window.onbeforeunload = function (e) {
                var e = window.event || e;
                e.returnValue = ("确定离开当前页面吗？离开后所有通话将关闭！");
            }
        });

        //重连
        function reconnect(socketUrl) {
            var tempWs = ws;
            ws = new WebSocket(socketUrl);
            ws.onopen = tempWs.onopen;
            ws.onmessage = tempWs.onmessage;
            ws.onerror = tempWs.onerror;
            ws.onclose = tempWs.onclose;
        }

        serverTimeoutObj = null;
        //心跳包
        var heartCheck = {
            timeout: 5000,//60ms
            timeoutObj: null,
            reset: function () {
                clearTimeout(this.timeoutObj);
                clearTimeout(serverTimeoutObj);
                this.start();
            },
            start: function () {
                this.timeoutObj = setTimeout(function () {
                    console.log(GetQueryString("userId") + "|发送心跳包");
                    ws.send(GetQueryString("userId") + "|HeartBeat");
                    serverTimeoutObj = setTimeout(function () {
                        console.log("关闭连接！1");
                        ws.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                    }, 10000)
                }, this.timeout)
            },
        }

        //=====================================webSocket_END==================================

    </script>

</body>
</html>